<template>
  <a-modal
    :visible="visible"
    title="评论区"
    cancelText="取消"
    okText="提交"
    @ok="submit"
    @cancel="cancel"
    :footer="null"
  >
    <div v-html="showHtml"></div>
    <a-list
      v-if="comments.length"
      :data-source="comments"
      :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
      item-layout="horizontal"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <a-comment
            :author="item.author"
            :avatar="item.avatar"
            :content="item.content"
            :datetime="item.datetime"
          />
        </a-list-item>
      </template>
    </a-list>
    <a-comment>
      <template #avatar>
        <a-avatar :src="image" alt="Han Solo"/>
      </template>
      <template #content>
        <a-form-item>
          <a-textarea v-model:value="value" :rows="4"/>
        </a-form-item>
        <a-form-item>
          <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
            回 复
          </a-button>
        </a-form-item>
      </template>
    </a-comment>
  </a-modal>
</template>
<script>
import {defineComponent, reactive, ref, toRaw, watch} from "vue";
import {savComment} from "@/api/module/answer";
import {message} from "_ant-design-vue@2.2.8@ant-design-vue";
import {formatDate} from "@/component/time/commom";

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
    },
    viewId: {
      type: String
    },
    record: {
      type: Object,
    }
  },
  components: {},
  data() {
    return {
      show: true,
      image: null,
    }
  },
  created() {
    // 获取当前登陆人头像
    let item = localStorage.getItem("avatar");
    if (item == null || item === "undefined") {
      item = "https://joeschmoe.io/api/v1/random"
    }
    this.image = item
  },
  emit: ["close"],
  setup(props, context) {
    const formRef = ref();
    const value = ref('');
    // 内容字段
    const showHtml = ref('');
    const submitting = ref(false);
    // 评论列表
    const comments = ref([]);
    // 新增评论
    const formState = reactive({
    });
    const state = reactive({
      posts: [],
    })

    // 从父组件传过来数据
    watch(props, (props) => {
      console.log("---------------", toRaw(props.record))
      showHtml.value = props.record.content
      comments.value = props.record.Comment
    })


    // 关闭弹窗
    const cancel = (e) => {
      console.log(props)
      context.emit("close", false);
    };


    // 提交评论
    const handleSubmit = () => {
      if (!value.value) {
        return;
      }
      submitting.value = true;
      formState.content = value.value
      formState.dialogueId = props.viewId
      formState.sendTime = formatDate()
        savComment(toRaw(formState)).then((response) => {
          if (response.success) {
            message.success({content: '保存成功', duration: 1}).then(() => {});
          } else {
            message.error({content: response.msg, duration: 1}).then(() => {});
          }
        })
      setTimeout(() => {
        submitting.value = false;
        comments.value = [{
          author: localStorage.getItem("nickname"),
          avatar: localStorage.getItem("avatar"),
          content: value.value,
          datetime: formatDate(),
        }, ...comments.value];
        value.value = '';
      }, 100);
    };

    return {
      state,
      cancel,
      comments,
      submitting,
      formState,
      value,
      handleSubmit,
      showHtml,
    };


  },
});
</script>
<style>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
